<template>
	<div class="page4">
		<component :is="currentCom" :src="info.m3u8" :poster="info.m3u8_images"></component>

		<div style="padding-bottom: 100px;">
			<div class="desc" v-html="info.desc">
			</div>
			<div class="chat">
				<template v-for="(item, index) in list">
				<div class="record_l" v-if="item.user_id != user.id">
					<img :src="item.avatar"/>
					<div>
						<span>{{item.name}}</span>
						<p>{{item.content}}</p>
					</div>
				</div>
				<div class="record_r" v-else>
					<img :src="item.avatar"/>
					<div>
						<span>{{item.name}}</span>
						<p>{{item.content}}</p>
					</div>
				</div>
				</template>
			</div>
			<van-cell-group style="position: fixed;bottom:50px;width: 100%;">
			  <van-field v-model="value" placeholder="说点儿什么吧" :right-icon="icon" @click-right-icon	="onSubmit" />
			</van-cell-group>
			<Bottom></Bottom>
		</div>
	</div>
</template>

<script>
// import VideoBox from '@/pages/home/videoBox.vue'
import Bottom from '@/pages/home/bottom.vue'
import Video from '@/pages/home/video.vue'
import { addPl,getPl } from '@/api/user.js'

export default {
	components: {
    Bottom,Video
  },
  data() {
    return {
      active: 1,
			value: '',
			icon:require('../assets/images/zhanhui/send.png'),
			info: this.$store.state.active,
			user: this.$store.state.user,
			page: 1,
			list: [],
			timer: {},
			currentCom: ''
    };
  },
  created() {
  	if(!this.user.mobile) {
  		this.$router.push({name: 'Index'})
  		return 
  	}
  	this.getList()
  	let _this = this
  	this.timer = window.setInterval(function(){
  		_this.page = 1
  		_this.getList()
  	}, 10000)
  	this.currentCom = Video
  },
  beforeDestroy() {
		if(this.timer) window.clearInterval(this.timer); //关闭
　},
  methods: {
  	onSubmit(e) {
  		this.$toast.loading({
			  message: '加载中...',
			  forbidClick: true,
			  loadingType: 'spinner',
			});
  		addPl({content: this.value}).then(res=> {
  			this.$toast.clear()
  			this.value = ''
  			this.$toast(res)
  			this.page = 1
  			this.getList()
  		})
  		console.log(e)
  	},
  	getList() {
  		getPl({page: this.page}).then(res=> {
  			if(res.data.length == 0) {
  				this.$toast('没有了')
  				return
  			}
  			if(this.page == 1) {
  				this.list = res.data
  			}else{
  				this.list = this.list.contact(res.data)
  			}
  		})
  	}
  }
};	
</script>

<style >
	.page4{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		/* overflow: hidden; */
	}
	.page4>img{
		width: 100%;
		height: 40%;
	}
	.page4 .desc{
		margin: 5px .3rem;
		max-height: 5rem;
	}
	.page4 .desc p{
		font-size: 13px;
		color: #888;
	}
	.page4 .desc img{ width: 100%; }
	.page4 .chat{
		background-color: #fbf6f3;
		max-height: 200px;
		padding: 20px 5px;
		overflow-y: scroll;
	}
	.page4 .chat div{
		margin-bottom: 8px;
	}
	.page4 .chat img{
		width: 1rem;
		height: 1rem;
		border-radius: 999px;
		margin: 0 15px;
	}
	.page4 .chat span{
		font-size: 13px;
		color: #000;
		display: block;
	}
	.page4 .chat p{
		font-size: 12px;
		color: #000;
		border-radius: 999px;
		padding: 5px;
		margin: 8px 0;
		max-width: 60%;
		padding: 5px 10px;
	}
	.page4 .chat .record_l{
		float: left;
		width: 100%;
	}
	.page4 .chat .record_l img{
		float: left;
	}
	.page4 .chat .record_l p{
		float: left;
		background-color: #fff;
	}
	.page4 .chat .record_r{
		float: right;
		width: 100%;
	}
	.page4 .chat .record_r img{
		float: right;
	}
	.page4 .chat .record_r p{
		float: right;
		background-color: #ffdecc;
	}
	.page4 .chat .record_r div{
		text-align: right;
	}
	.page4 input{
		border: 1px solid #d6d6d6;
		border-radius: 999px;
		padding: 4px 10px;
	}
	.page4 i img{
		width: 1.5em;
		height: 1.5em;
	}
</style>
